<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的等级</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/setlevel.css"/>

</head>

<body>
<div class="container" id="container">
    <div class="page panel js_show">
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__hd" style="overflow: hidden;background-color:#44bfc4;padding: 30px 10px;text-align: center;">
                <div  class="level">
                    {$info.rank_name}
                </div>
                <p style="padding: 10px 30px;color: #FFFFFF">我的积分：{$info.bonus}</p>
            </div>
        </div>
        <!--等级说明 开始-->
        <div class="weui-panel weui-panel_access" style="margin-top: 0;">
            <div class="weui-cells titleBack" style="margin-top: 0;">
                <div class="weui-cell">
                    <div class="weui-cell__hd"></div>
                    <div class="weui-cell__bd">
                        <p>会员等级</p>
                    </div>
                    <div class="weui-cell__bd">
                        <p>所需积分</p>
                    </div>
                    <div class="weui-cell__ft">操作</div>
                </div>
            </div>
        </div>
        <!--等级说明 结束-->
        <div class="weui-panel weui-panel_access" style="margin-top: 0;">
            <div class="borderTop weui-cells" style="margin-top: 0;">
                {volist name="level" id="vo"}
                <div class="wrap">
                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <img src="__STATIC_URL__/static/mobile/images/vip{$i}.png" alt="" style="width:20px;margin-right:5px;display:block">
                        </div>
                        <div class="weui-cell__bd {$vo.id}">
                            <p>{$vo.live_title}</p>
                        </div>
                        <div class="weui-cell__bd">
                            <p>{$vo.bonus}</p>
                        </div>
                        {switch name=":rankRewardStatu(['gid'=>$info['id'],'lid'=>$vo['id']])"}
                        {case value="9"}<div class="weui-cell__ft blq">无奖励</div>{/case}
                        {case value="8"}<div class="weui-cell__ft blq">未达到</div>{/case}
                        {case value="7"}<div class="weui-cell__ft blq">已领取</div>{/case}
                        {case value="6"}<div class="weui-cell__ft czlq" data-lid="{$vo.id}" data-gid="{$info.id}">领取</div>{/case}
                        {default /}敬请期待
                        {/switch}
                    </div>
                    <div class="wrapList">{$vo.welfare}</div>
                </div>
                {/volist}

            </div>
        </div>



    </div>
</div>

<!--确认框-->
<div class="js_dialog" id="androidDialog1" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog weui-skin_android">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
        <div class="weui-dialog__bd">确认领取该奖励吗？</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
        </div>
    </div>
</div>
<!--toast-->
<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content" id="lqts">已领取</p>
    </div>
</div>
</body>
<script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    $(function() {
        var lid = "";
        var gid = "";
        var $androidDialog1 = $('#androidDialog1');
        $('.weui-cells').on('click', '.wrap', function() {
            $(".wrapList").slideUp();
            if($(this).find('.wrapList').css('display') == "none"&&$(this).find('.wrapList').html()!="") {
                $(this).find('.wrapList').slideDown();
            } else {
                $(this).find('.wrapList').slideUp();
            }

        });
        $(".weui-dialog__btn_default").click(function(){
            $androidDialog1.fadeOut(200);
        });
        $(".czlq").click(function(e) {
            e.stopPropagation();
            lid = $(this).attr("data-lid");
            gid = $(this).attr("data-gid");
            $androidDialog1.fadeIn(200);
        });
        $(".weui-dialog__btn_primary").click(function() {
            $(".weui-dialog__btn_primary").prop("onclick",null).off("click");

            $.ajax({
                type: "post",
                url: "{:url('carduser/getRankReward')}",
                async: true,
                data: {
                    lid:lid,
                    gid:gid
                },
                success: function(data) {
                    if(data.code==0){
                        $("#lqts").text(data.message);
                        var $toast = $('#toast');
                        if($toast.css('display') != 'none') return;
                        $toast.fadeIn(100);
                        setTimeout(function() {
                            window.location.reload()
                        }, 1000);
                    }else{
                        $("#lqts").text(data.message);
                        var $toast = $('#toast');
                        if($toast.css('display') != 'none') return;
                        $toast.fadeIn(100);
                        setTimeout(function() {
                            $toast.fadeOut(100);
                        }, 2000);
                    }

                }
            });
        })
    })
</script>

</html>